@extends('admin.tableLayout')
@section('title','菜单管理（后台）')
@section('quote')
    <button type="button" class="layui-btn layui-btn-small" id="getAll" onclick="javascript:location.href='{{route('admin.dev-menu-add')}}'"><i class="fa fa-plus" aria-hidden="true"></i> 添加菜单</button>
    <hr/>
@endsection
@section('toolbar')
    @can('admin')
        @{{#  if(d.parent_id !=0){ }}
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="parent"><i class="fa fa-eye"></i> 查看父级</a>
        @{{# }else{ }}
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="son"><i class="fa fa-eye"></i> 查看子级</a>

        @{{#  } }}

        <a class="layui-btn layui-btn-xs " lay-event="edit"><i class="fa fa-edit"></i> 编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete"><i class="fa fa-trash-o"></i> 删除</a>

    @endcan
@endsection
@section('tableRender')
    <script type="text/html" id="route">
        @{{# if(d.href){ }}
        <code>@{{d.href}}</code>
        @{{# }else{ }}
        <span>-</span>
        @{{# } }}
    </script>
    <script>
        layui.use(['table','jquery','form'], function(){
            var table = layui.table;
            var $=layui.jquery;
            var form=layui.form;
            var _renderLoad = layer.msg('正在生成菜单，请稍候',{icon: 16,time:false,shade:0.8});
            ;
            var render=table.render({
                elem:"#table",
                page:true,
                id:'idTest',
                url:'{{route('admin.dev-menuAjax')}}',
                where:{
                    pid:0,
                },
                height:400,
                cols:  [[ //标题栏
                    {checkbox:true,fixed:true},
                    {field:'order',title:'排序<i class="fa fa-paint-brush"></i>',width:80,edit:'text',fixed:true}
                    ,{field: 'title', title: '菜单名称', width: 200},
                    {field: 'href', title: '路径', width: 200,templet:'#route'},
                    {field: 'permission', title: '权限', width: 200},
                    {fixed: 'right', width:350,title:'操作', align:'center', toolbar: '#toolbar'}
                    //这里的toolbar值是模板元素的选择器
                ]],
                response: {//返回格式自定义
                    statusName: 'code' //数据状态的字段名称，默认：code
                    ,statusCode: 0 //成功的状态码，默认：0
                    ,msgName: 'msg' //状态信息的字段名称，默认：msg
                    ,countName: 'total' //数据总数的字段名称，默认：count
                    ,dataName: 'data' //数据列表的字段名称，默认：data
                },
                done:function () {
                    layer.close(_renderLoad);
                }
            });
            table.on('checkbox(table)', function(obj){
                //console.log(obj)
            });


            //上方
            table.on('edit(table)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
                $.get('{{route('admin.dev-menu',['act'=>'sortCol'])}}',{id:obj.data.id,sort:obj.value},function (e) {
                },'json')
            });
            table.on('tool(table)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                if(layEvent === 'delete'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        layer.close(index);
                        //向服务端发送删除指令
                        $.get('{{route('admin.dev-menu',['act'=>'delete'])}}',{id:data.id},function(e){
                            if(e.info=='success'){
                                layer.msg('操作成功',{icon:1});
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            }
                        });
                    });
                } else if(layEvent === 'edit'){ //编辑
                    location.href='/admin/dev-menu/edit/'+data.id;
                    //do something
                    //同步更新缓存对应的值
                }else if(layEvent === 'son'){
                    var posts = {
                        pid:data.id
                    };
                    _renderLoad = layer.msg('正在生成菜单，请稍候',{icon: 16,time:false,shade:0.8});
                    render.reload(
                        {
                            where:posts
                        }
                    );

                }else if(layEvent === 'parent'){
                    var posts = {
                        pid:0
                    };
                    _renderLoad = layer.msg('正在生成菜单，请稍候',{icon: 16,time:false,shade:0.8});
                    render.reload(
                        {
                            where:posts
                        }
                    );
                }
            });
        });

    </script>
@endsection